<template>
  <div>
    <el-dialog :visible="dialogVisible" :show-close="false" width="651px">
      <div class="dialog-box">
        <div class="head">
          <span> 对比详情 </span>
          <img
            src="@/assets/equipment_icon_close.png"
            alt=""
            @click="handleClose"
          />
        </div>
        <div class="centent">
          <div class="title-name">
            <span style="margin-left: 44px">合同对比图表</span>
          </div>
          <div class="echrtas">
            <chart-bar
              :data="chartData"
              :x-axis-data="xAxisData"
              :legend-data="legendData"
              :width="'600px'"
              :height="'200px'"
              text="柱状图"
            />
          </div>
          <div class="contrast">
            <div class="title-name">
              <span style="margin-left: 44px">合同对比图表</span>
            </div>
            <div class="btn-list">
              <div class="btn">导出对比报告</div>
              <div class="btn">添加对比</div>
            </div>
          </div>
          <el-table
            :data="tableData"
            :span-method="objectSpanMethod"
            border
            style="width: 100%; margin-top: 20px"
          >
            <el-table-column prop="dimensionOne" label="一级维度" width="180">
            </el-table-column>
            <el-table-column prop="dimensionTwo" label="二级维度">
            </el-table-column>
            <el-table-column prop="contrastOne" label="对比内容1">
            </el-table-column>
            <el-table-column prop="contrastTwo" label="对比内容2">
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import ChartBar from "@/components/echarts/bar"; //柱状图
export default {
  name: "myDialog",
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    }, // 弹窗状态
  },
  components: { ChartBar },
  data() {
    return {
      tableData: [
        {
          dimensionOne: "王小虎",
          dimensionTwo: "1",
          contrastTwo: ".2",
          contrastOne: 3,
        },
        {
          dimensionOne: "王小虎",
          dimensionTwo: "4",
          contrastTwo: "3.",
          contrastOne: 5,
        },
        {
          dimensionOne: "王小虎",
          dimensionTwo: "234",
          contrastTwo: "3.2",
          contrastOne: 10,
        },
        {
          dimensionOne: "王小虎",
          dimensionTwo: "234",
          contrastTwo: "3.2",
          contrastOne: 10,
        },
        {
          dimensionOne: "王小虎",
          dimensionTwo: "234",
          contrastTwo: "3.2",
          contrastOne: 10,
        },
      ],
      chartData: [
        [120, 200, 150, 80, 70],
        [100, 180, 130, 90, 60],
      ],
      xAxisData: ["A", "B", "C", "D", "E"],
      legendData: ["Series 1", "Series 2"],
    };
  },
  methods: {
    // 关闭弹窗
    handleClose() {
      console.log(4654);
      this.$emit("handleClose");
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex % 2 === 0) {
          return {
            rowspan: 2,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
  },
  mounted() {
    console.log(333);
  },
};
</script>
<style lang="less" scoped>
.flex-center {
  display: flex;
  align-items: center;
}
.bg-repeat {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.contrast {
  margin-top: 25px;
  .flex-between;
  .btn-list {
    .flex-center;
    .btn {
      cursor: pointer;
      margin-left: 19px;
      padding: 0 10px;
      height: 33px;
      line-height: 33px;
      background: rgba(48, 204, 193, 0.24);
      border-radius: 4px;
      border: 1px solid #00998b;
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 12px;
      color: #00998b;
    }
  }
}
/* 设置表格单元格背景色 */
/deep/.has-gutter {
  .el-table__cell {
    background: linear-gradient(0deg, #eaeff4 0%, #f6faff 100%);
    border-bottom: none;
    border-right: none;
  }
}
/deep/ .el-el-table__row {
  .cell {
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #333333;
  }
}
/deep/ .el-dialog__header {
  display: none;
}
/deep/ .el-dialog__body {
  padding: 0px !important;
}
.head {
  display: flex;
  justify-content: space-between;
  span {
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 18px;
    color: #333333;
  }
  img {
    width: 20px;
    height: 20px;
    cursor: pointer;
  }
  width: 615px;
  padding: 26px 18px;
  background: linear-gradient(0deg, #f3f6f9 0%, #d1f2ef 100%);
  border-radius: 4px;
}
.dialog-box {
  padding-bottom: 23px;
  .centent {
    padding: 13px 22px 13px 10px;
    .echrtas {
      // width: 600px;
      margin-top: 20px;
      // border: 1px solid rgb(55, 0, 255);
    }
    .title-name {
      // padding-left: 44px;
      width: 278px;
      height: 34px;
      line-height: 34px;
      background: url("@/assets/step_name_nav.png");
      .bg-repeat;
    }
  }
}
</style>
